<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>驾驶舱 - 超级天车</title>

    <!-- 自己的服务器带宽小,采用cdn -->
    <!-- IE8 支持 HTML5 元素-->
    <!--    [if lt IE 9]>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <!--    <![endif]-->

    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="crane">
        <div class="dashboard" v-if="menu=='dashboard'">
            <div class="screen">
                <div class="name">特装车间 · 天车驾驶舱</div>
                <div class="house">
                    <div class="workshop" :style="{width: width+'px' }"></div>
                    <div class="machine left" :style="{left:c1Location+'px',transition:'left '+control.speed/10+'s linear 0s'}">
                        <div class="text" >C1</div>
                        <div class="axis"></div>
                        <div class="label">{{c1Location/10}}m</div>
                    </div>
                    <div class="machine right" :style="{left:c2Location+'px',transition:'left '+control.speed/10+'s linear 0s'}">
                        <div class="text">C2</div>
                        <div class="axis"></div>
                        <div class="label">{{c2Location/10}}m</div>
                    </div>
                    <div class="ruler">
                        <div class="scale" :class="[{'node':i%10==0&&i>0,'half':i%5==0&&i%10!=0}]" v-for="i of (width/10)" :key="i"></div>
                    </div>
                    <div class="tags">
                        <div class="tag" v-for="i of (width/100)+1" :key="i">{{(i-1)*10}}m</div>
                    </div>
                </div>
            </div>
            <div class="controls">
                <div class="control">
                    <div class="item">
                        <div class="title">控制面板</div>
                    </div>
                    <div class="item">
                        <div class="text">天车：</div>
                        <a href="javascript:void(0);" class="button left" :class="[{'selected':control.machine==1}]" v-on:click="onMachine(1)">C1</a>
                        <a href="javascript:void(0);" class="button left" :class="[{'selected':control.machine==2}]" v-on:click="onMachine(2)">C2</a>
                    </div>
                    <div class="item">
                        <div class="text">方向：</div>
                        <a href="javascript:void(0);" class="button left" :class="[{'selected':control.direction=='left'}]" v-on:click="onDirection('left')">
                            <div class="icon left"></div>
                        </a>
                        <a href="javascript:void(0);" class="button right" :class="[{'selected':control.direction=='right'}]" v-on:click="onDirection('right')">
                            <div class="icon right"></div>
                        </a>
                    </div>
                    <div class="item">
                        <div class="text">日志：</div>
                        <a href="javascript:void(0);" class="button log left" :class="[{'selected':control.log}]" v-on:click="onLog(true)">记录</a>
                        <a href="javascript:void(0);" class="button log right" :class="[{'selected':!control.log,'red':!control.log}]" v-on:click="onLog(false)">停止记录</a>
                    </div>
                    <div class="item">
                        <div class="text">状态：</div>
                        <div class="text status" :class="[{'start':control.start}]">{{control.start?'运行中':'已停止'}}</div>
                    </div>
                    <div class="item">
                        <div class="text">时间：</div>
                        <div class="text status" :class="[{'start':control.start}]">{{timeFormat(control.time)}}</div>
                    </div>
                    <div class="item">
                        <div class="text">操作：</div>
                        <a href="javascript:void(0);" class="button" :class="[{'green':!control.start,'red':control.start}]" v-on:click="onOperation">{{control.start?'停止':'开始'}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tables" v-if="menu=='table'">
            <div class="title">特装车间 · 天车操作记录</div>
            <table class="table" border="0" cellpadding="0" cellspacing="0">
                <tr class="columns">
                    <th class="column">序号</th>
                    <th class="column">天车</th>
                    <th class="column">方向</th>
                    <th class="column right">开始时间</th>
                    <th class="column right">结束时间</th>
                    <th class="column right">耗时</th>
                </tr>
                <tr class="rows" v-for="(item,i) in history.list" :key="item.id">
                    <td class="cell center" style="width: 50px">{{(history.page-1)*history.rows+i+1}}</td>
                    <td class="cell vital center">C{{item.machine}}</td>
                    <td class="cell vital center" style="width: 80px">{{item.direction==3?'左':'右'}}</td>
                    <td class="cell right" style="width: 200px">{{item.beginTime}}</td>
                    <td class="cell right" style="width: 200px">{{item.endTime}}</td>
                    <td class="cell right" style="width: 200px">{{timeFormat(item.total)}}</td>
                </tr>
                <tr class="empty" v-if="history.total==0">
                    <td class="center" colspan="6">暂无数据</td>
                </tr>
            </table>
            <div class="pager">
                <div class="total">当前第 {{history.page}}/{{history.pageCount}} 页, 共 {{history.total}} 行</div>
                <div class="page">
                    <a href="javascript:void(0);" :class="[{'disable':!history.first}]" v-on:click="if(history.first){onLoadHistory(1)}">首页</a>
                    <a href="javascript:void(0);" :class="[{'disable':!history.prev}]" v-on:click="if(history.prev){onLoadHistory(history.page-1)}">上一页</a>
                    <a href="javascript:void(0);" :class="[{'disable':!history.next}]" v-on:click="if(history.next){onLoadHistory(history.page+1)}">下一页</a>
                    <a href="javascript:void(0);" :class="[{'disable':!history.last}]" v-on:click="if(history.last){onLoadHistory(history.pageCount)}">尾页</a>
                </div>
            </div>
        </div>
        <div class="menus">
            <a class="menu" href="javascript:void(0);" v-on:click="onMenu('dashboard')">
                <div class="icon dashboard" :class="[{'selected':menu=='dashboard'}]"></div>
            </a>
            <a class="menu" href="javascript:void(0);" v-on:click="onMenu('table')">
                <div class="icon table" :class="[{'selected':menu=='table'}]"></div>
            </a>
        </div>
    </div>

</body>
</html>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="./js/utils.js"></script>
<script>
    $(document.body).ready(function(){
        init();

        loadStatus();
    });
    function loadStatus(){
        utils.get({url:'/v1/status/find'},function(result){
            // console.log(result)
            let temp=result||{};
            vm.control.machine=temp.machine||2;
            vm.control.direction=(temp.direction||4)==3?'left':'right';
            vm.control.log=temp.logger||false;
            if(temp.c1Location)
                vm.c1Location=temp.c1Location;
            if(temp.c2Location)
                vm.c2Location=temp.c2Location;
        });
    }
    var vm=null,task=null;
    function init(){
        vm = new Vue({
            el: $(".crane")[0],
            components:{},
            data: {
                width:1000,
                c1Location:20,
                c2Location:70,
                menu:'dashboard',//table
                control:{
                    speed:3,
                    time:0,
                    machine:2,
                    direction:'right',
                    start:false,
                    log:true,
                    beginTime:null,
                    endTime:null
                },
                history:{
                    list:[],
                    page:1,
                    rows:10,
                    total:0,
                    pageCount:0,

                    first:false,
                    prev:false,
                    next:false,
                    last:false,
                }
            },
            computed: {
                c1LeftLimit() {
                    return 20;
                },
                c1RightLimit() {
                    return this.c2Location - 50;
                },
                c2LeftLimit(){
                    return (this.c1Location||this.c1LeftLimit) + 50;
                },
                c2RightLimit(){
                    return this.width - 20;
                }
            },
            methods: {
                onMachine(i){
                    if(!this.control.start){
                        this.control.machine=i;
                        this.onSave();
                    }
                },
                onDirection(val){
                    if(!this.control.start){
                        this.control.direction=val;
                        this.onSave();
                    }
                },
                onLog(val){
                    if(!this.control.start){
                        this.control.log=val;
                        this.onSave();
                    }
                },
                onOperation(){
                    if(!this.control.start){
                        this.onStart();
                    }else{
                        this.onStop();
                    }
                },
                onSave(){
                    utils.json({url:'/v1/status/save',data:{
                            machine:this.control.machine,
                            direction:this.control.direction=='left'?3:4,
                            logger:this.control.log,
                            c1Location:this.c1Location,
                            c2Location:this.c2Location
                        }
                    },()=>{
                        console.log("保存成功")
                    })
                },
                onStart(){
                    if(!this.control.start) {
                        //判断是否可移动
                        this.control.start = true;
                        if(!verify.apply(this)){
                            //并保留按钮效果
                            setTimeout(()=>{
                                this.onStop();
                            },100);
                            return
                        }

                        this.control.time = 0;
                        this.control.beginTime = moment().format("YYYY-MM-DD HH:mm:ss");

                        //移动
                        task = setInterval(() => {
                            this.control.time = this.control.time + 100;

                            run.apply(this);
                        }, 100);

                        function verify(){
                            let location = this.control.machine == 1 ? this.c1Location : this.c2Location;
                            let distance = this.control.direction == 'left' ? -this.control.speed : this.control.speed;
                            if (this.control.direction == 'left') {
                                let leftLimit = this.control.machine == 1 ? this.c1LeftLimit : this.c2LeftLimit;
                                return !(leftLimit > location + distance);
                            } else {
                                let rightLimit = this.control.machine == 1 ? this.c1RightLimit : this.c2RightLimit;
                                return !(rightLimit < location + distance);
                            }
                        }
                        function run(){
                            let location = this.control.machine == 1 ? this.c1Location : this.c2Location;
                            let distance = this.control.direction == 'left' ? -this.control.speed : this.control.speed;
                            if (this.control.direction == 'left') {
                                let leftLimit = this.control.machine == 1 ? this.c1LeftLimit : this.c2LeftLimit;
                                let cross=leftLimit >= location + distance;
                                if (this.control.machine == 1) {
                                    this.c1Location = cross ? leftLimit : location + distance;
                                } else {
                                    this.c2Location = cross ? leftLimit : location + distance;
                                }
                                if(cross)
                                    this.onStop();
                            } else {
                                let rightLimit = this.control.machine == 1 ? this.c1RightLimit : this.c2RightLimit;
                                let cross=rightLimit <= location + distance;
                                if (this.control.machine == 1) {
                                    this.c1Location = cross ? rightLimit : location + distance;
                                } else {
                                    this.c2Location = cross ? rightLimit : location + distance;
                                }
                                if(cross)
                                    this.onStop();
                            }
                        }
                    }
                },
                onStop(){
                    if(this.control.start) {
                        let vaild=false;
                        if (task) {
                            vaild=true;
                            clearInterval(task);
                        }
                        this.control.start = false;
                        this.control.endTime = moment().format("YYYY-MM-DD HH:mm:ss");

                        //只有有效数据才保存
                        if(vaild){
                            if(this.control.log){
                                utils.json({url:'/v1/history/save',data:{
                                        machine:this.control.machine,
                                        direction:this.control.direction=='left'?3:4,
                                        logger:this.control.log,
                                        beginTime:this.control.beginTime,
                                        endTime:this.control.endTime,
                                        total:this.control.time
                                    }
                                },()=>{
                                    console.log("保存成功")
                                })
                            }
                            this.onSave();
                        }
                    }
                },
                onLoadHistory(val){
                    if(val){
                        this.history.page=val;
                    }

                    utils.json({url:'/v1/history/list',data:{
                            page:this.history.page,
                            rows:this.history.rows,
                        }
                    },(result)=>{
                        console.log(result);
                        this.history.total=result.total;
                        this.history.pageCount = ((result.total-(result.total%this.history.rows))/this.history.rows) + (result.total%this.history.rows>0?1:0);
                        this.history.list = result.data||[];
                        this.history.first=this.history.page>1;
                        this.history.prev=this.history.page>1;
                        this.history.next=this.history.page<this.history.pageCount;
                        this.history.last=this.history.page<this.history.pageCount;
                    })
                },
                onMenu(val){
                    if(!this.control.start){
                        //
                        if(this.menu!=val&&val=='table'){
                            this.onLoadHistory();
                        }
                        this.menu=val;
                    }
                },
                timeFormat(val) {
                    let ms = val > 0 ? parseInt(val) : 0;
                    if (ms == 0) {
                        return '00:00.000';
                    }
                    let millisecond=(ms % 1000);
                    if(millisecond==0)
                        millisecond='000';
                    let tempSecond = parseInt(ms / 1000);
                    if (tempSecond == 0) {
                        return '00:00.' + millisecond;
                    }
                    let second = (tempSecond % 60) + '';
                    let minute = (((tempSecond - second) % 3600) / 60) + '';
                    let hour = ((tempSecond - (tempSecond % 3600)) / 3600) + '';
                    return (hour == 0 ? '' : ((hour.length == 1) ? ('0' + hour) : hour) + ':') + ((minute.length == 1) ? ('0' + minute) : minute) + ':' + ((second.length == 1) ? ('0' +
                        second) : second) + '.' + millisecond;
                }
            },
            beforeUpdate(){

            },
            updated () {
            },
        });
    }
</script>